<template>
    <van-nav-bar title="选择自提点" left-text="返回" left-arrow @click-left="$router.back()" />
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
        <div v-for="item in list" :key="item.id" class="row" @click="selectStation(item)">
            <div class="left">
                <div class="name">{{item.name}}</div>
                <div class="concat">{{item.concat}}</div>
                <div class="address">{{item.address}}</div>
            </div>
            <img src="@/assets/img/go.png" class="go">
        </div>
    </van-list>
    <div style="height: 200px;"></div>
</template>
  
<script>
import axios from 'axios';
import { showDialog } from 'vant'; // 引入弹窗的方法
export default {
    data() {
        return {
            loading: false, // 是否是加载状态
            finished: false, // 列表是否加载完成
            pageNo: 0, // 页数
            pageSize: 20, // 页距，指每页有多少个
            list: [], // 商品列表
        }
    },
    created() {
        this.getList();
    },
    methods: {
        // 获取列表
        async getList() {
            this.loading = true; // 开始拉取数据的时候开始转圈
            const res = await axios.post('http://localhost:6001/list/station', {
                // $timeout: 1000, // 模拟延时，3秒后返回
                pageNo: this.pageNo,
                paseSize: this.pageSize
            });
            this.pageNo++; // 拉取了第一个页的数据后，就应该拉取第二页
            const data = res.data;
            // console.log('=================data', data);
            // 将拉取的数据追加到原来的数据的后面
            // 使用map和...可以给一个列表的每一项增加属性
            this.list = [...this.list, ...data.result.list.map(o => ({ ...o, count: 1 }))];
            if (data.result.list.length < this.pageSize) { // 说明已经拉取完成
                this.finished = true;
            }
            this.loading = false; // 拉取数据完成关闭转圈
        },
        selectStation(item){
            // console.log(item);
            this.$store.commit('setStation',item)
            // console.log(this.$store.state.station);
            this.$router.back()
        }
    }
}
</script>

<style scoped>
.row{
    display:flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    align-items: center;
}
.row .name{
    font-size: 20px;
    font-weight: 800;
}

.address{
    font-size: 12px;
    color: #999;
}
.go{
    width:30px;
    height:30px
}

</style>